經過前幾天的討論，我們應該對 Rive 的實作有基本的概念了。其實 Rive 除了大家目前看到的 API 以外，還有一組 Low-level API，讓我們能更精確的操作渲染邏輯，同時效能也好很多。當然他也比較複雜，所以我們會花一點時間介紹。在介紹 Low-level API 之前，我們要先對 render loop 有基本概念，才能理解到底 Low-level API 在做什麼。

什麼是 render loop

render loop 是一個瀏覽器的概念與機制，顧名思義是用來處理渲染的，感覺上會跟 event loop 有點像。因為每一個網頁都有把資料渲染到畫面上這件事，所以每一個網頁都有用到 render loop，只是我們有沒有意識到而已。

簡單來說，可以把 render loop 想像成一組 function，他大概會長這樣。

const startRenderLoop = () => {
	initRenderLoop()
	const loop = () => {
		updateDatas()
		renderDatas()
		loop()
	}
	return cleanupFunction
}

// onMounted
const cleanup = startRenderLoop()

// onBeforeUnmount
cleanup()

1. 首先會有 initRenderLoop，初始化 render loop 的一些資料，例如載入資源，初始化 Rive 等等。
2. 接著正式進入到 loop 裡面，整個 loop 說穿了就是根據目前的 state 來 update datas，update 的原因可能是因為時間經過，使用者互動，event 被觸發等等。
3. update 之後就是 render，把 update 完的資料渲染到畫面上，通常真正的渲染細節會交由 Rive 之類的渲染器處理，我們只要呼叫渲染器提供的渲染 API 就好。
4. update 跟 render 之後，再遞迴呼叫自己，達到 loop 的效果，這就是為什麼動畫可以一直動，因為 loop 一直在執行，一直自己轉啊轉啊轉，不停 update & render update & render update & render update & render update & render update & rendmer。
5. 通常同時會回傳一個 cleanup，讓我們可以在畫面卸載的時候清掉整個 loop，避免佔用不需要的記憶體造成 memory leak。這一部非常重要，很多奇怪的 bug 都是沒有成功 cleanup 導致的，有些 library 或語言可能會幫我們自動清理。

其實沒有很複雜

render loop 的架構，其實就只是 init-update-render-cleanup 這四個生命週期而已，所以無論是接下來的 Rive Low-level API，還是其他不同的動畫引擎，本質上都是在這四個生命週期 hook 裡面填東西而已。

從這個角度與架構來看就會很好理解，剩下的就只是語法 & 程式碼實現細節的問題，因此明天就會正式開始介紹 Rive 的 Low-level API。